<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../sass/header.css">
    <link rel="stylesheet" href="../sass/footer.css">
    <link rel="stylesheet" href="../sass/index.css">
</head>

<body>
    <!-- 公共头 -->
    <div class="header-common"></div>

    <div class="header-nav">
        <ul class="nav container">
            <li class="active">首页</li>
            <li>9块9包邮</li>
            <li>超值大额点券</li>
            <li>降温急救穿搭</li>
        </ul>
    </div>
    
    <!-- banner -->
    <div class="banner container">
        <ul class="aside">
            <li class="li-0">
                <span class="iconfont icon-nvzhuang"></span>
                <a href="">女装/</a>
                <a href="">女鞋</a>
            </li>
            <li class="li-1">
                <span class="iconfont icon-yundongxie"></span>
                <a href="">男装/</a>
                <a href="">男鞋</a>
            </li>
            <li class="li-2">
                <span class="iconfont icon-kouhong"></span>
                <a href="">美妆/</a>
                <a href="">个护</a>
            </li>
            <li class="li-3">
                <span class="iconfont icon-gouwudai"></span>
                <a href="">配饰/</a>
                <a href="">箱包</a>
            </li>
            <li class="li-4">
                <span class="iconfont icon-lingshi"></span>
                <a href="">零食王国&nbsp&nbsp</a>

            </li>
            <li class="li-5">
                <span class="iconfont icon-naiping"></span>
                <a href="">母婴用品&nbsp&nbsp</a>

            </li>
            <li class="li-6">
                <span class="iconfont icon-shouji"></span>
                <a href="">手机/</a>
                <a href="">数码</a>
            </li>
            <li class="li-7">
                <span class="iconfont icon-neiyi"></span>
                <a href="">内衣袜子&nbsp&nbsp&nbsp</a>
            </li>
            <li class="li-8">
                <span class="iconfont icon-shafa"></span>
                <a href="">文娱/</a>
                <a href="">家居</a>
            </li>
        </ul>

        <!-- 五宫格 -->
        <div class="event">

            <div class="banner_top">
                <div class="temp_banner"></div>
                
                <!--9.9包邮 -->
                <div class="nine shadow">
                    <h3></h3>
                    <p class="nine_tittle"></p>
                    <img class="nine_img" src="" alt="">

                </div>
            </div>

            <div class="banner_buttom">
                <!-- 一宫格 -->
                <div class="clothes shadow">
                    <h3></h3>
                    <p></p>
                    <div class="go">GO</div>
                    <img class="clothes_img" src="" alt="">
                </div>
                <!-- 二宫格 -->
                <div class="discount shadow">
                    <h3></h3>
                    <p></p>
                    <div class="go">GO</div>
                    <img class="discount_img" src="" alt="">
                </div>
                <!-- 二维码 -->
                <div class="code shadow">
                    <p>扫码下载APP</p>
                    <p>发现更多惊喜</p>
                    <img src=""
                        alt="二维码加载失败">
                </div>
            </div>
        </div>

    </div>

    <!-- 中间的小标题 -->
    <div class="index_tittle container">
        <h3>小编精选</h3>
        <p>每天更新</p>
    </div>

    <!-- 首页内容 -->
    <div class="index_content container">

    </div>

    <!-- 查看更多 -->
    <div class="more_btn">查看更多</div>

    <!-- 返回顶部
    <img  class="toTop" src="../static/image/返回顶部.png" alt=""> -->

    <!-- 公共脚 -->
    <div class="footer-common"></div>
    

    <script src="../js/template-web.js"></script>
    <script src="../js/jQuery3.6.0.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/index.js"></script>



    <!-- 首页的轮播图 引擎模板-->
    <script type="text/html" id="template_banner">
        <div class="swiper-container carousel">
            <div class="swiper-wrapper">
                {{each productList}}
                    <div class="swiper-slide">
                        <img src="{{$value.imageUrl}}" alt="">
                    </div>
                {{/each}}
                
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>



    </script>
</body>

</html>